﻿@using TfsStatus.Infrastructure
@model TfsStatus.Models.ChangeSetHistory
@{
    ViewBag.Title = "Changeset History";
}

<div>
    <label for="txtSince">Since: </label>
    <input type="datetime" id="txtSince" data-bind="datetimepickerHandler: Since, datetimepickerOptions: { ampm: true }" />
    <button type="submit" id="btnGetChangeSets">Get ChangeSets</button>
</div>
<h3>Team:</h3>

<div id="teamChangeSets" style="min-height: 50px; display: none;">
	<span data-bind="visible: ErrorMessage, text: ErrorMessage"></span>

	<table class="changeset">
		<thead>
			<tr class="changeset-user-head"><th scope="colgroup" colspan="3">User</th></tr>
			<tr class="changeset-detail-head"><th>Id</th><th>Date/Time</th><th>Details</th></tr>
		</thead>
		<tbody data-bind="template: { name: 'rowTempl', foreach: ChangeSetsByUser }"></tbody>
		<script id="rowTempl" type="text/html">
			<tr class="changeset-user"><td data-bind="text: key" colspan="3"></td></tr>
			<!-- ko foreach: value-->
			<tr class="changeset-detail">
				<td><a data-bind="attr: {href: Url, title: Id}, text: Id" target="_blank"></a></td>
				<td data-bind="dateTimeString: ChangeDateTime"></td>
				<td>
					<span data-bind="text: Comment"></span><br/>
					<h4 class="toggleBoxHead">Files</h4>
					<div class="toggleBox" style="display: none;">
						<!-- ko foreach: Files -->
						&nbsp;&nbsp;<span data-bind="text: ChangeType"></span>
                        &nbsp;<a data-bind="attr: {href: Url, title: FilePath}, text: FilePath" target="_blank"></a><br/>
						<!-- /ko -->
					</div>
                    
                    <h4 class="toggleBoxHead" data-bind="visible: WorkItems.length > 0">Work Items</h4>
					<div class="toggleBox" style="display: none;">
						<!-- ko foreach: WorkItems -->
						<a data-bind="attr: {href: Url, title: Id}, text: Id + ' ' + Title" target="_blank"></a><br/>
						<!-- /ko -->
					</div>
				</td>
			</tr>
			<!-- /ko -->
		</script>
	</table>
</div>

<div id="ajaxLoader" style="display: none;">
	<p>Loading...</p>
	<img id="img-ajaxLoader" src="@Href("~/Images/ajax-loader.gif")" alt="Loading..." />
</div>

@section scripts
{
    @Scripts.Render("~/Scripts/jquery-ui-1.8.11.min.js", "~/Scripts/jquery-ui-timepicker-addon.js")

    <script>
        var viewModel = null;

        $(document).ready(function() {
	        
            var changeSetsByUserMapping = {
                'ChangeSetsByUser' : {
                    create: function(options) {
                        var changeSetsArray = [];
                        for (var key in options.data) {
                            if (options.data.hasOwnProperty(key)) {
                                changeSetsArray.push({ key: key, value: ko.observableArray(options.data[key]) }); 
                            }  
                        }

                        return ko.observableArray(changeSetsArray);
                    }
                }
            };
            
            var getSinceISOString = function() {
                var sinceValue = viewModel.Since();
                if (sinceValue instanceof Date)
                    sinceValue = sinceValue.toISOString();
                return sinceValue;
            };
            
            var getChangesets = function() {
                var ajaxData = { since: getSinceISOString() };
                $.ajax({
                    url: '/api/TfsChangeSet',
                    data: ajaxData,
                    contentType: 'application/json',
                    type: 'GET',
                    success: function(result) {
                        viewModel = ko.mapping.fromJS(result, changeSetsByUserMapping);
                        ko.applyBindings(viewModel);
                    },
                    error: function(jqXhr, textStatus, errorThrown) {
                        viewModel.ErrorMessage('Error loading changesets: ' + errorThrown);
                    }
                });
            };
            
            // initial viewmodel
            var modelJson = @Html.ToJson(Model);
            viewModel = ko.mapping.fromJS(modelJson, changeSetsByUserMapping);
            
            // load priod value from localStorage, if present
            var lastSince = window.localStorage.getItem('lastSince');
            if (lastSince) viewModel.Since(lastSince);
            
            ko.applyBindings(viewModel);
            
            // load changesets on click
            $("#btnGetChangeSets").live('click', function() {
                window.localStorage.setItem('lastSince', getSinceISOString());
                getChangesets();
            });
            
            // set up collapsible togglebox
            $(".toggleBoxHead").live('click', function(){
                var $this = $(this);
                $this.toggleClass('toggleBoxHeadExpanded');
                $this.next(".toggleBox").slideToggle(100);
            });
            
            // ajax spinner while loading
            $('#ajaxLoader')
                .hide()  // hide it initially
                .ajaxStart(function() {
                    $("#teamChangeSets").fadeTo(200, 0);
                    $(this).fadeTo(200, 1);
                })
                .ajaxStop(function() {
                    $(this).fadeTo(200, 0);
                    $("#teamChangeSets").fadeTo(200, 1);
                });

            // perform initial load
            getChangesets();
            
        });
    </script>
}
